<template>
	<view class="leaderlist-container">
		<!-- 主内容区域 - 添加上拉刷新和下拉加载 -->
		<scroll-view class="scroll-view" scroll-y refresher-enabled="true" refresher-triggered="refreshing"
			refresher-background="#f5f5f5" refresher-height="80" lower-threshold="100" @refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore">
			<!-- 领队列表 -->

			<!-- 领队列表 -->
			<view class="leader-list">
				<view v-for="(leader, index) in leaders" :key="leader.id" class="leader-item">
					<view class="leader-info">
						<view class="leader-name">{{ leader.name || '未命名' }}</view>
						<view class="leader-detail">
							<text class="detail-item">电话: {{ leader.phone || '未设置' }}</text>
							<!-- <text class="detail-item">邮箱: {{ leader.email || '未设置' }}</text> -->
						</view>
					</view>
					<view class="leader-actions">
						<view class="action-btn edit-btn" @click="editLeader(leader)">
							<text class="action-text">编辑</text>
						</view>
						<view class="action-btn delete-btn" @click="deleteLeader(leader.id, index)">
							<text class="action-text">删除</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态提示 -->
			<view v-if="leaders.length === 0 && !loadingMore && !refreshing" class="empty-state">
				<text class="empty-text">暂无领队信息</text>
				<text class="empty-hint">点击右下角"+"按钮添加新领队</text>
			</view>

			<!-- 加载中提示 -->
			<view v-if="loadingMore" class="loading-state">
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 无更多数据提示 -->
			<view v-if="!hasMore && leaders.length > 0" class="no-more-state">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>

		<!-- 右下角浮动添加按钮 -->
		<view class="float-add-btn" @click="addLeader">
			<text class="float-add-icon">+</text>
		</view>
	</view>
</template>

<script>
	import {
		getGuideList,
		deleteGuideById
	} from '@/https/guide.js'

	export default {
		data() {
			return {
				// 导游数据列表
				leaders: [],
				// 分页相关数据
				page: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,
				loadingMore: false,
				// 下拉刷新状态
				refreshing: false
			}
		},

		onShow() {
			// 刷新数据
			this.getGuideListData(true)
		},

		onLoad() {
			// 初始加载数据
			this.getGuideListData(true)
		},

		methods: {
			// 获取导游列表数据
			getGuideListData: async function(refresh = false) {
				 
				// 防止重复加载
				if (!refresh) {
					if (this.loadingMore || !this.hasMore) return
					this.loadingMore = true
				}

				try {
					// 重置页码（如果是刷新）
					if (refresh) {
						this.page = 1
 					}

					// 调用导游API获取列表
					const params = {
						OpenId: null, // 可以根据需求设置
						GuideName: null, // 可以根据需求设置搜索条件
						Status: null, // 可以根据需求设置状态筛选
						PageNum: this.page,
						PageSize: this.pageSize,
						TotalNum: 0
					}

					const res = await getGuideList(params)

					// 处理返回的数据
					if (res && Array.isArray(res.result)) {
						// 转换数据格式，确保与页面展示需求匹配
						const formattedData = res.result.map(guide => ({
							id: guide.guideId,
							name: guide.guideName,
							phone: guide.phone || '未设置',
							email: '未设置', // API中没有邮箱字段
							status: guide.status // 保存原始状态值
						}))

						// 更新列表数据
						if (refresh) {
							this.leaders = formattedData
						} else {
							this.leaders.push(...formattedData)
						}

						// 判断是否还有更多数据
						this.hasMore = formattedData.length === this.pageSize

						// 如果是刷新且数据为空，显示空状态提示
						if (refresh && formattedData.length === 0) {
							uni.showToast({
								title: '暂无领队数据',
								icon: 'none'
							})
						}
					} else {
						// 如果返回的数据格式不符合预期
						if (refresh) {
							this.leaders = []
							uni.showToast({
								title: '暂无领队数据',
								icon: 'none'
							})
						}
						this.hasMore = false
					}
				} catch (error) {
					console.error('获取导游列表失败:', error)
					uni.showToast({
						title: error.message || '获取导游列表失败，请检查网络连接',
						icon: 'none',
						duration: 2000
					})
					// 出错时清空列表（仅在刷新模式下）
					if (refresh) {
						this.leaders = []
					}
					this.hasMore = false
				} finally {
					// 更新加载状态
					this.loadingMore = false

					// 停止下拉刷新
					if (refresh) {
						this.refreshing = false
					}
				}
			},

			// 下拉刷新（自定义）
			onRefresh: function() {
				console.log('下拉刷新触发')
				this.refreshing = true
				this.getGuideListData(true)
			},

			// 上拉加载更多
			onLoadMore: function() {
				console.log('上拉刷新触发')
				// 避免重复加载和无数据时加载
				if (this.loadingMore || !this.hasMore) return
				this.page++
				this.getGuideListData(false)
			},



			// 添加领队
			addLeader: function() {
				// 使用try-catch包装导航操作，防止超时导致的未处理异常
				try {
					const url = '/pages/mine/leader-edit'

					uni.navigateTo({
						url: url,
						fail: () => {
							// 显示友好的错误提示
							uni.showToast({
								title: '导航失败，请重试',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					// 静默捕获异常，避免应用崩溃
				}
			},

			// 编辑领队
			editLeader: function(leader) {
				// 确保ID有效
				if (!leader.id || leader.id <= 0) {
					uni.showToast({
						title: '导游ID无效',
						icon: 'none'
					})
					return
				}

				// 使用try-catch包装导航操作，防止超时导致的未处理异常
				try {
					// 确保URL格式正确
					const url = `/pages/mine/leader-edit?id=${leader.id}`

					uni.navigateTo({
						url: url,
						success: () => {
							console.log('导航成功')
						},
						fail: (err) => {
							console.error('导航失败:', err)
							// 显示友好的错误提示
							uni.showToast({
								title: '导航失败，请重试',
								icon: 'none'
							})
						}
					})
				} catch (error) {
					// 静默捕获异常，避免应用崩溃
				}
			},

			// 删除导游
			deleteLeader: async function(id, index) {
				// 确保ID有效
				if (!id || id <= 0) {
					uni.showToast({
						title: '导游ID无效',
						icon: 'none'
					})
					return
				}

				uni.showModal({
					title: '确认删除',
					content: '确定要删除该导游吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 显示加载提示
								uni.showLoading({
									title: '删除中...'
								})

								// 调用删除API
								await deleteGuideById(parseInt(id))

								// 移除本地列表项
								this.leaders.splice(index, 1)

								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})

								// 刷新列表获取最新数据
								await this.getGuideListData(true)
							} catch (error) {
								uni.showToast({
									title: '删除失败: ' + (error.message || ''),
									icon: 'none'
								})
							} finally {
								// 确保加载提示被隐藏
								uni.hideLoading()
							}
						}
					},
					// 添加fail回调处理模态框显示失败的情况
					fail: () => {
						// 静默处理失败情况
					}
				})
			}
		}
	}
</script>

<style scoped>
	.leaderlist-container {
		padding: 0;
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
	}

	/* 滚动视图 */
	.scroll-view {
		height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 浮动添加按钮 */
	.float-add-btn {
		position: fixed;
		bottom: 60rpx;
		right: 40rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: #007aff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
		z-index: 99;
	}

	.float-add-icon {
		font-size: 80rpx;
		color: #fff;
		line-height: 1;
		margin-top: -8rpx;
	}

	/* 领队列表 */
	.leader-list {
		margin: 30rpx;
	}

	.leader-item {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.leader-info {
		margin-bottom: 20rpx;
	}

	.leader-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.leader-detail {
		font-size: 28rpx;
		color: #666;
	}

	.detail-item {
		display: block;
		margin-bottom: 6rpx;
	}

	.leader-actions {
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
	}

	.action-btn {
		padding: 10rpx 30rpx;
		border-radius: 12rpx;
		margin-left: 20rpx;
	}

	.edit-btn {
		background-color: #e6f2ff;
		color: #007aff;
	}

	.delete-btn {
		background-color: #ffe6e6;
		color: #ff6666;
	}

	.action-text {
		font-size: 28rpx;
	}

	/* 空状态提示 */
	.empty-state {
		margin: 200rpx auto 0;
		text-align: center;
		padding: 100rpx 0;
	}

	/* 加载中提示 */
	.loading-state {
		text-align: center;
		padding: 30rpx 0;
	}

	.loading-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 无更多数据提示 */
	.no-more-state {
		text-align: center;
		padding: 30rpx 0;
	}

	.no-more-text {
		font-size: 26rpx;
		color: #ccc;
	}

	.empty-text {
		display: block;
		font-size: 32rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.empty-hint {
		display: block;
		font-size: 28rpx;
		color: #bbb;
	}
</style>